import { View, Text } from '@tarojs/components'
import './index.scss'

interface FunctionButtonsProps {
  onMirrorFaceClick?: () => void
  onEyeTestClick?: () => void
  onFaceAnalysisClick?: () => void
}

export default function FunctionButtons({
  onMirrorFaceClick,
  onEyeTestClick,
  onFaceAnalysisClick
}: FunctionButtonsProps) {
  
  const handleMirrorFaceClick = () => {
    console.log('魔镜测脸')
    onMirrorFaceClick?.()
  }

  const handleEyeTestClick = () => {
    console.log('PK测眼型')
    onEyeTestClick?.()
  }

  const handleFaceAnalysisClick = () => {
    console.log('测脸型')
    onFaceAnalysisClick?.()
  }

  return (
    <View className='function-buttons-container'>
      {/* 左侧主要功能按钮 */}
      <View 
        className='left-button' 
        hoverClass='button-hover'
        hoverStayTime={100}
        onClick={handleMirrorFaceClick}
      >
        <View className='button-icon'>
          <Text className='icon-text'>👥</Text>
        </View>
        <View className='button-content'>
          <Text className='button-title'>魔镜测脸</Text>
          <Text className='button-subtitle'>AI智能分析面部特征</Text>
          <Text className='button-desc'>精准测量 · 专业建议</Text>
        </View>
      </View>
      
      {/* 右侧功能按钮组 */}
      <View className='right-buttons'>
        <View 
          className='right-button top' 
          hoverClass='button-hover'
          hoverStayTime={100}
          onClick={handleEyeTestClick}
        >
          <View className='button-icon small'>
            <Text className='icon-text'>👁️</Text>
          </View>
          <View className='button-content'>
            <Text className='button-title'>
              <Text className='title-main'>PK</Text>
              <Text className='title-sub'>测眼型</Text>
            </Text>
            <Text className='button-subtitle'>眼部美学对比</Text>
          </View>
        </View>
        
        <View 
          className='right-button bottom' 
          hoverClass='button-hover'
          hoverStayTime={100}
          onClick={handleFaceAnalysisClick}
        >
          <View className='button-icon small'>
            <Text className='icon-text'>💄</Text>
          </View>
          <View className='button-content'>
            <Text className='button-title'>面部分析</Text>
            <Text className='button-subtitle'>脸型评估</Text>
          </View>
        </View>
      </View>
    </View>
  )
}
